<template>
  <div class="p-ctrl-bar">
    <div class="p-ctrl-bar_item p-ctrl-bar_cycle">
      <svg-icon :icon-class="iconPlayMode" @click="togglePlayMode"/>
    </div>
    <div class="p-ctrl-bar_item p-ctrl-bar_prev">
      <svg-icon icon-class="prev" @click="togglePlayPrev"/>
    </div>
    <div class="p-ctrl-bar_item p-ctrl-bar_play">
      <svg-icon :icon-class="iconPlayOrPause" @click="togglePlay"/>
    </div>
    <div class="p-ctrl-bar_item p-ctrl-bar_next">
      <svg-icon icon-class="next" @click="togglePlayNext"/>
    </div>
    <div class="p-ctrl-bar_item p-ctrl-bar_list">
      <svg-icon icon-class="song-list" @click="$emit('update:showPlaylist', !showPlaylist)"/>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'player-control-bar',
  props: {
    showPlaylist: { type: Boolean, require: true }
  },
  computed: {
    ...mapGetters(['isPlay', 'audio', 'playMode', 'songId']),
    iconPlayOrPause () {
      return this.isPlay ? 'pause' : 'play'
    },
    iconPlayMode () {
      return this.playMode === 0
        ? 'play-loop'
        : (this.playMode === 1 ? 'play-single' : 'play-random')
    }
  },
  methods: {
    togglePlayMode () {
      this.$store.dispatch('player/togglePlayMode')
    },
    togglePlayPrev () {
      this.$store.dispatch('player/togglePlayPrev')
      this.$emit('reset-ct')
    },
    togglePlayNext () {
      this.$store.dispatch('player/togglePlayNext')
      this.$emit('reset-ct')
    },
    togglePlay () {
      this.$store.dispatch('player/togglePlay')
    }
  }
}
</script>

<style lang="scss" scoped>
.p-ctrl-bar {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  height: 1rem;
  padding: .25rem 0;
  font-size: .3rem;
  color: #fff;

  @media (max-height: 600px) {
    height: .7rem;
    padding: .1rem;
  }

  &_item {
    width: .5rem;
    line-height: .5rem;
    text-align: center;
  }

  &_play {
    font-size: .5rem;
  }
}
</style>
